<!--
 * @Date: 2024-09-23 13:56:49
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-12-19 09:47:24
 * @Description: 资源加载测试
-->
<template>
  <div class="test-wrapper">
    <div class="test-tool">
      <el-form label-width="auto">
        <el-divider content-position="left">头部区域设置</el-divider>
        <el-form-item label="是否启用">
          <el-switch v-model="layoutAttrs.enableHeader"></el-switch>
        </el-form-item>
        <el-form-item label="左侧启用">
          <el-switch v-model="layoutAttrs.headerLeftEnable"></el-switch>
        </el-form-item>
        <el-form-item label="左侧宽度">
          <el-input v-model="layoutAttrs.headerLeftWidth"></el-input>
        </el-form-item>
        <el-form-item label="左侧对齐方式">
          <el-select v-model="layoutAttrs.headerLeftAlign">
            <el-option
              v-for="item in alignOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="右侧启用">
          <el-switch v-model="layoutAttrs.headerRightEnable"></el-switch>
        </el-form-item>
        <el-form-item label="右侧宽度">
          <el-input v-model="layoutAttrs.headerRightWidth"></el-input>
        </el-form-item>
        <el-form-item label="右侧对齐方式">
          <el-select v-model="layoutAttrs.headerRightAlign">
            <el-option
              v-for="item in alignOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-divider content-position="left">侧边区域设置</el-divider>
        <el-form-item label="是否启用">
          <el-switch v-model="layoutAttrs.enableAside"></el-switch>
        </el-form-item>
        <el-form-item label="侧边区域宽度">
          <el-input v-model="layoutAttrs.asideWidth"></el-input>
        </el-form-item>
        <el-divider content-position="left">查询区域设置</el-divider>
        <el-form-item label="是否启用">
          <el-switch v-model="layoutAttrs.enableCondition"></el-switch>
        </el-form-item>
        <el-form-item label="默认展开">
          <el-switch v-model="layoutAttrs.expandCondition"></el-switch>
        </el-form-item>
        <el-form-item label="右侧宽度">
          <el-input v-model="layoutAttrs.conditionRightWidth"></el-input>
        </el-form-item>
        <el-form-item label="右侧对齐方式">
          <el-select v-model="layoutAttrs.conditionRightAlign">
            <el-option
              v-for="item in alignOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-divider content-position="left">中间区域设置</el-divider>
        <el-form-item label="上下布局">
          <el-switch v-model="layoutAttrs.openUpDownMain"></el-switch>
        </el-form-item>
        <el-form-item label="上部区域高度">
          <el-input v-model="layoutAttrs.mainUpHeight"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="test-body">
      <LayoutFull :="layoutAttrs">
        <template #header_left>
          <RkButtonGroup options="json_jcsh_button"/>
        </template>
        <template #header_right>
          <el-button v-for="i in 6" :key="i">新建项目{{ i }}</el-button>
        </template>
        <template #aside>
          <RkAdAgTree
            :adTreeHidden="true"
          />
        </template>
        <template #condition_content>
          <el-form ref="form" :inline="true">
            
            <el-form-item label="申报年度">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="申报年度">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="申报年度">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="申报年度">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="申报年度">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="申报年度">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="申报年度">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="申报年度">
              <el-input></el-input>
            </el-form-item>
          </el-form>
        </template>
        <template #condition_toolbar>
          <el-button>查询</el-button>
          <el-button>重置</el-button>
          <el-button>重置</el-button>
          <el-button>重置</el-button>
          <el-button>重置</el-button>
        </template>
        <template #main>
          <rk-grid
            title="评审项目信息表"
            dataUrl="/proResApply/reserveProjectPage"
            boxConfig
            :params="queryParams"
            :columns="tableColumns"
            :totaled="true">
          </rk-grid>
        </template>
        <template #main_down>
          <rk-grid
            title="评审项目信息表"
            dataUrl="/proResApply/reserveProjectPage"
            boxConfig
            :params="queryParams"
            :columns="tableColumns"
            :totaled="true">
          </rk-grid>
        </template>
      </LayoutFull>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { useUserStore } from '@/stores/modules';
// import VfLayoutFull from './layout/VfLayoutFull.vue'

const userInfo = useUserStore().userInfo
const routeQuery = useRoute().query

const layoutAttrs = reactive({
  enableAside: true,
  asideWidth: '300px',
  
  enableHeader: true,
  headerLeftWidth: 'auto',
  headerLeftAlign: 'left',
  headerLeftEnable: true,
  headerRightWidth: 'auto',
  headerRightAlign: 'right',
  headerRightEnable: true,

  enableCondition: true,
  expandCondition: true,
  conditionRightWidth: '200px',
  conditionRightAlign: 'right',
  
  mainUpHeight: '',
  openUpDownMain: true,
})

const alignOptions = reactive([
  { value: 'left', label: '居左' },
  { value: 'center', label: '居中' },
  { value: 'right', label: '居右' },
  // { value: 'top#left', label: '顶端居左' },
  // { value: 'top#right', label: '顶端居右' },
  // { value: 'top#center', label: '顶端居中' },
  // { value: 'center#left', label: '垂直居左' },
  // { value: 'center#right', label: '垂直居右' },
  // { value: 'center#center', label: '垂直居中' },
  // { value: 'end#left', label: '底端居左' },
  // { value: 'end#right', label: '底端居右' },
  // { value: 'end#center', label: '底端居中' },
  
])

const queryParams = reactive({
  // 单位
  dw: 2,
  // 模糊查询
  mhcx: undefined,
  // 机构ID
  agId: userInfo.agId,
  // 机构编码
  agCode: userInfo.agCode,
  // 区划编码
  adCode: userInfo.adBjCode,
  // 流程节点
  nodeId: routeQuery.nodeId,
  // 按钮组状态
  wfStatus: history.state.wfStatus ?? '001',
  // 流程的KEY
  processKey: routeQuery.processKey,
  // 债券类型测试数据 1、一般 2、专项
  bondTypeCode: 2,
})
// 表格字段定义
const tableColumns = reactive([
  { field: 'agencyName', title: '申报单位', width: 180, },
  {
    field: 'proName', title: '项目名称', width: 250, align: 'left',
    cellRender: { name: 'xmYHS' }
  },
  { field: 'proCode', title: '项目编码', width: 200, align: 'center' },
  { field: 'fiscalYear', title: '年度', width: 120, align: 'center' },
  { field: 'debtDeadlineName', title: '债券期限', width: 130, align: 'center' },
  { field: 'applyAmt', title: '申请金额', width: 150, align: 'right', formatter: 'formatThousand', totaled: true },
  { field: 'expFuncName', title: '支出功能分类', width: 200 },
  { field: 'govBgtEcoName', title: '政府预算支出经济分类', width: 250 },
  { field: 'depBgtEcoName', title: '部门预算支出经济分类', width: 250 },
  { field: 'proCapital', title: '项目资本金', width: 150, align: 'right', formatter: 'formatThousand', totaled: true },
  {
    field: 'bondTypeCode', title: '申请类型', width: 120, align: 'center',
    formatter: ['enumsFormats', 'COMMON_BOND_TYPES']
  },
  { field: 'applyDate', title: '申报日期', width: 120, align: 'center' },
  { field: 'setupYear', title: '立项年度', width: 100, align: 'center' },
  { field: 'proTypeName', title: '项目类型', width: 150 },
  { field: 'fundInvestAreaName', title: '资金投向领域', width: 200 },
  { field: 'totalBudget', title: '项目总概算', width: 150, align: 'right', formatter: 'formatThousand', totaled: true },
  { field: 'proStatusName', title: '建设状态', width: 120 },
  { field: 'startDate', title: '开工日期', width: 120, align: 'center' },
  { field: 'endDate', title: '竣工日期', width: 120, align: 'center' },
  { field: 'remark', title: '备注', width: 120 },
])

const toArray = (str) => {
  console.log('toArray', str.split(','))
}
const content = ',,0C6ED80E039D4234A626851583766718,,0C6ED80E039D4234A626851583766718,,,,,,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,,,,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,,,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,,,,0C6ED80E039D4234A626851583766718,,,,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,,,,0C6ED80E039D4234A626851583766718,,,,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,,0C6ED80E039D4234A626851583766718,,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,0C6ED80E039D4234A626851583766718,'
toArray(content)

</script>

<style lang="scss" scoped>
.test-wrapper {
  height: 100%;
  display: grid;
  grid-template-columns: 300px auto;
}
.test-tool {
  padding: 8px;
  background-color: #fff;
  overflow: auto;
}
</style>

